{% extends "base.html" %}
    {% block custom_style %}
    <link href="/static/css/index.css" rel="stylesheet">
    {% endblock %}
    {% block content %}
    	<div class="jumbotron" style="background-color:#3498db">
      		<div class="container" style="color:#ffffff">
				<span class="icon-stack" style="float:right; font-size:150px; color:#ffffff">
					<i class="icon-cloud icon-stack-base"></i>
					<i class="icon-file-text" style="color:#3498db"></i>
				</span>
	        	<h1 class="sans">medicloud</h1>
	        	<h2 class="sans-light">The future of medical communication.</h2>
	        	<p><a href="/login" class="btn btn-success btn-lg"><i class="icon-user"></i> Sign in</a>
    		</div>
    	</div>
    	<div class="container">
      		<div class="row" style="text-align:center;">
		        <div class="col-lg-4">
		        	<i style="text-align:center" class="icon-file-text icon-4x"></i>
		          	<h2 class="sans">Access</h2>
		          	<p class="sans">Medicloud stores your medical data in the cloud so that you and your doctor can access it when needed.</p>
		          	<p><a class="btn btn-primary" href="/about">View details &raquo;</a></p>
		        </div>
        		<div class="col-lg-4">
        			<i class="icon-lock icon-4x"></i>
		         	<h2 class="sans">Security</h2>
		         	<p class="sans">Security is our priority. Medicloud provides industry-grade security, always keeping your data safe.</p>
		         	<p><a class="btn btn-primary" href="/about">View details &raquo;</a></p>
		       	</div>
		        <div class="col-lg-4">
		        	<i class="icon-user-md icon-4x"></i>
		         	<h2 class="sans">Communication</h2>
		         	<p class="sans">Medicloud enables doctors and patients to collaborate, making data understandable.</p>
		         	<p><a class="btn btn-primary" href="/about">View details &raquo;</a></p>
        		</div>
        	</div>
      	</div>
    {% endblock %}
    {% block custom_scripts %}{% endblock %}